<template>
    <header class="title-bar">
        <button v-if="hasBackButton" @click="goBack" class="back-button">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                <path
                    d="M19 11H7.83l4.88-4.88c.38-.38.38-1.02 0-1.41-.38-.38-1.02-.38-1.41 0l-6.59 6.59c-.38.38-.38 1.02 0 1.41l6.59 6.59c.38.38 1.02.38 1.41 0 .38-.38.38-1.02 0-1.41L7.83 13H19v-2z" />
            </svg>
        </button>
        <h1 class="title">{{ title }}</h1>
    </header>
</template>

<script setup>
import { ref } from 'vue';

import { useRouter } from 'vue-router';
const router = useRouter()
defineProps({
    title: {
        type: String,
        required: true
    },
    hasBackButton: {
        type: Boolean,
        default: false
    }
});


const goBack = () => {
    router.go(-1);
};

</script>

<style scoped>
.title-bar {
    display: flex;
    align-items: center;

    padding: 1rem;
    background-color: #f5f5f5;
}

.back-button {
    border: 0 solid #fff;
    margin-right: 1rem;
    background-color: #fff;
    margin-top: 2px;
}

.title {
    font-size: 1.2rem;
    font-weight: bold;
}
</style>